import './css.css';

// vue导入
import Vue from 'vue';
import app from './app.vue';

// vuex导入
import Vuex from 'vuex';
Vue.use(Vuex);

// router导入
import routerObj from './router.js';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// vue-resource导入
import VueResource from 'vue-resource';
Vue.use(VueResource);

// 全局配置域名 JSON发送格式
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true;

// mui导入
import '../src/lib/mui/css/mui.min.css';
import '../src/lib/mui/css/icons-extra.css';

// mint-ui导入
import 'mint-ui/lib/style.css';
import MintUI from 'mint-ui';
Vue.use(MintUI);

// 导入日期格式化插件
import moment from 'moment';

// 定义全局过滤器 定义一个模板module，如果有值传进来的话就是那个值，没有即为默认 
Vue.filter('datemsg', (dataStr, module='YYYY-MM-DD HH:mm:ss') => { 
    return moment(dataStr).format(module);
})

// 缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

// 注册vuex对象
var store = new Vuex.Store({
    state: {
        list: []
    },
    mutations: { // 最多支持传两个参数，可以通过对象的方法解决 this.$store.commit('方法名称',参数)

        // 思路：当加入的是之前就有过的商品，只增加其数量，否则重新加入数组 定义一个 flag 来控制走哪条分支
        addToCar(state,obj){
            let flag = false;
            state.list.some(item => {
                if(item.id == obj.id){
                    item.count += parseInt(obj.count);
                    flag = true;
                    return true;
                }
            })
            if(!flag){
                state.list.push(obj)
            }
        },
        // 点击修改购物车中商品的数量值
        upDateCar(state,obj){
            state.list.forEach(item => {
                if(item.id == obj.id){
                    item.count = parseInt(obj.count)
                }
            })
            console.log(this.state.list)
        },
        // 点击删除购物车中的商品
        deletCar(state,id){
            state.list.some((item,i) => {
                if(item.id == id){
                    state.list.splice(i,1);
                    return true;
                }
            })
            console.log(this.state.list)
        },
        // 修改list中对应商品的选中情况
        selectShops(state,id){
            state.list.some(item => {
                if(item.id == id){
                    item.flag = !item.flag;
                    return true;
                }
            })
            console.log(this.state.list)
        }
    },
    getters: { // getters只负责对外提供数据，不负责修改数据

        // 获取购物车下标数量，每更新一次，就重新计算 i 的值
        getAllCount(state){   
            let i = 0;
            state.list.forEach(item => {
                i += item.count
            })
            return i
        },
        // 获取加入的商品数量，每更新一次，就重新构建数组 a = [{商品的id: 对应商品的count},{...}]
        getGoodsCount(state){
            let a = [];
            state.list.forEach(item => {
                a[item.id] = item.count
            })
            return a
        },
        // 获取当前商品选中情况，每更新一次，就重新构建数组 b = [{商品的id: 对应商品的flag},{...}]
        getSelectCount(state){
            let b = [];
            state.list.forEach(item => {
                b[item.id] = item.flag
            })
            return b
        },
        // 获取当前选中商品数量、商品总价
        getSelectMsg(state){
            let c = {count: 0,price: 0};
            state.list.forEach(item => {
                if(item.flag){
                    c.count += item.count;
                    c.price += eval(item.count * item.price)
                }
            })
            return c
        },
        
    }
})

var vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        
    },
    router: routerObj,
    render: a => a(app),
    store: store
})